﻿@model ILookup<GroupTeam, GroupUser>
@{
    Layout = "/Areas/Account/Views/Profile/_Layout.cshtml";
    ViewData["Title"] = "Teams";
    IUser user = ViewBag.User;
    ViewData["ActiveAction"] = "TrainingTeams";
}

<h4>Training teams</h4>
<partial name="_StatusMessage" model="@TempData["StatusMessage"]" />
@{ TempData["StatusMessage"] = null; }

<table class="table table-striped table-sm mt-3">
    <thead>
        <tr>
            <th scope="col">name</th>
            <th scope="col">members</th>
        </tr>
    </thead>
    <tbody>
        @if (!Model.Any())
        {
            <tr>
                <td colspan="2">No data available.</td>
            </tr>
        }
        else
        {
            foreach (var team in Model)
            {
                <tr>
                    <td class="table-cell team-name-cell text-reset text-decoration-none" data-toggle="gotoUrlV2" data-href="@Url.Action("Detail", new { teamid = team.Key.Id })">
                        @team.Key.TeamName
                    </td>
                    <td class="align-middle">
                        <ul class="mb-0 pl-0 list-unstyled">
                            @foreach (var u in team)
                            {
                            <li>
                                <user uid="u.UserId" username="@u.UserName" />
                                <razor asp-show-if="u.UserId == team.Key.UserId">(Owner)</razor>
                                <razor asp-show-if="!u.Accepted.HasValue">(Inviting)</razor>
                                <razor asp-show-if="u.Accepted == false">(Rejected)</razor>
                            </li>
                            }
                        </ul>
                    </td>
                </tr>
            }
        }
    </tbody>
</table>

<p class="mt-3 mb-0">
    <a asp-action="Create" data-toggle="ajaxWindow" data-target="createTeam" class="btn btn-primary">Create a team</a>
</p>

<script>
    $(function () {
        $('td[data-toggle="gotoUrlV2"]').each(function () {
            $(this).replaceWith($("<a/>", { href: $(this).data('href'), class: $(this).attr('class') }).append($(this).html()));
        });
    });
</script>

<style>
a.table-cell {
  display: table-cell;
  border-top: 1px solid #dee2e6;
  padding-left: .3rem;
  padding-right: .3rem;
}

.team-name-cell {
  vertical-align: middle;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}
</style>
